<template>
	<view class="advertisement">
		<u-navbar title="广告投放" :border-bottom="false"></u-navbar>
		<view class="i">
			<view class="l">
				选择商品
				<view class="c">*</view>
			</view>
			<view class="r" @click="show = true">
				<view class="t">{{ shopTitle }}</view>
				<u-icon name="arrow-right"></u-icon>
			</view>
		</view>
		<view class="i">
			<view class="l">基本信息</view>
			<view></view>
		</view>
		<view class="i">
			<view class="l l2">
				广告名称
				<view class="c">*</view>
			</view>
			<view class="r"><input type="text" v-model="form.title" placeholder="仅用于后台审核" /></view>
		</view>
		<view class="i">
			<view class="l l2">广告图片</view>
			<view class="r2" @click="mainImg">
				<view class="r2_box" v-if="form.img">
					<img :src="form.img" alt="" style="width: 100%; height: 100%" />
				</view>
				<view class="r2_box r2_box2" v-else style="flex-wrap: wrap">
					<img src="../../static/shangchuan.png" alt="" class="r2_box_img" />
					<view style="font-size: 20rpx; text-align: center; position: relative; top: -10rpx">大小:350*180</view>
				</view>
			</view>
		</view>
		<view class="info">
			<view class="t1">选择您想投放时长</view>
			<view class="t2">投放成功审核成功后将按审核顺序进行投放</view>
			<view class="t3">
				<view :class="active === 1 ? 't3_i t3_it' : 't3_i'" @click="active = 1">
					<view class="t3_i1">投放时长</view>
					<view class="t3_i22">1天</view>
					<view class="t3_i3">24小时</view>
					<view class="t3_i4">
						<view>￥{{ 1 * Price }}</view>
						<!-- <view><img src="../../static/set.png" alt="" class="L_img" /></view> -->
					</view>
				</view>
				<view :class="active === 2 ? 't3_i t3_i2 t3_it' : 't3_i t3_i2'" @click="active = 2">
					<view class="t3_i1">自定义投放时长</view>
					<view class="t3_i22">
						<input type="number" v-model="numsTime" />
						天
					</view>
					<view class="t3_i3">{{ Number(numsTime) * 24 }}小时</view>
					<view class="t3_i4">
						<view>￥{{ Number(numsTime) * Price }}</view>
						<view><img src="../../static/set.png" alt="" class="L_img" /></view>
					</view>
				</view>
			</view>
		</view>
		<view class="bt2">
			<!-- <view class="tips">您前面还有1位供应商正在投放的广告，剩余时间6小时</view> -->
			<view class="b2">
				<view class="l">
					订单金额：
					<view class="c">￥{{ active === 1 ? Price : Number(numsTime) * Price }}</view>
				</view>
				<view class="r" @click="show2 = true">提交</view>
			</view>
		</view>
		<u-popup v-model="show" mode="bottom" :safe-area-inset-bottom="true">
			<view class="kl">
				<view class="kl_title">请选择商品</view>
				<u-search v-model="keyword" @search="search" @custom="search"></u-search>
				<view class="ck">
					<scroll-view class="msg" scroll-y="true" @scrolltolower="lower">
						<u-radio-group v-model="value" @change="radioGroupChange" :wrap="true">
							<view v-for="(item, index) in flowList" :key="index" class="item">
								<u-radio @change="radioChange" :name="item.id">
									{{ item.title }}
								</u-radio>
							</view>
						</u-radio-group>
						<view style="padding: 20rpx 0rpx; box-sizing: border-box">
							<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" :bg-color="'none'"></u-loadmore>
						</view>
					</scroll-view>
				</view>
				<view class="bt" @click="confirmShop">确认</view>
			</view>
		</u-popup>
		<u-modal v-model="show2" :title="'提交须知'" @confirm="confirm" :show-cancel-button="true" :content="'申请一旦提交，将不能撤销，是否确认继续提交?'"></u-modal>
	</view>
</template>

<script>
import { shopgoodslist, qiniutoken, rulevalue, saveadv } from '../../libs/axios.js';
export default {
	data() {
		return {
			active: 1,
			show: false,
			show2: false,
			keyword: '',
			loadStatus: 'loadmore',
			flowList: [],
			page_num: 1,
			numsTime: 2,
			value: '',
			form: {
				img: ''
			},
			token: '',
			Price: 0,
			shopTitle: '商品选择'
		};
	},
	onLoad() {
		this.lower();
		// this.getqiniutoken();
		this.getrulevalue();
	},
	methods: {
		confirmShop() {
			this.flowList.forEach((item) => {
				if (item.id === this.value) {
					this.shopTitle = item.title;
				}
			});
			this.show = false;
		},
		async confirm() {
			const _this = this;
			if (!_this.form.title) {
				uni.showToast({
					title: '请输入广告名称',
					icon: 'error',
					duration: 2000
				});
				return false;
			}
			if (!_this.form.img) {
				uni.showToast({
					title: '请上传广告图片',
					icon: 'error',
					duration: 2000
				});
				return false;
			}
			if (!_this.value) {
				uni.showToast({
					title: '请选择商品',
					icon: 'error',
					duration: 2000
				});
				return false;
			}
			uni.login({
				async success(res) {
					let option = {
						wx_code: res.code,
						title: _this.form.title,
						banner_url: _this.form.img,
						goods_id: _this.value,
						day_num: _this.active === 1 ? 1 : _this.numsTime
					};
					let info = await saveadv(option);
					uni.requestPayment({
						provider: 'wxpay',
						timeStamp: info.data.timeStamp + '',
						nonceStr: info.data.nonce_str,
						package: 'prepay_id=' + info.data.prepay_id,
						signType: info.data.signType,
						paySign: info.data.paySign,
						success: function (res) {
							uni.showToast({
								title: '提交成功',
								icon: 'success',
								duration: 2000
							});
							setTimeout(() => {
								let ToPrice = _this.active === 1 ? _this.Price : Number(_this.numsTime) * _this.Price;
								uni.redirectTo({
									url: '/pages/paymentZ/paymentZ?ToPrice=' + ToPrice
								});
							}, 2000);
						},
						fail: function (err) {
							console.log('fail:' + JSON.stringify(err));
						}
					});
				}
			});
		},
		async getrulevalue() {
			let info = await rulevalue({ id: 2 });
			console.log(info.data[2].value);
			this.Price = Number(info.data[2].value);
		},
		async getqiniutoken() {
			let info = await qiniutoken({
				scope: this.$store.state.scope_img
			});
			this.token = info.data;
		},
		async getUploadFile(file, key) {
			await this.getqiniutoken();
			const _this = this;
			return new Promise((je, jc) => {
				uni.uploadFile({
					url: 'https://upload-z2.qiniup.com',
					filePath: file,
					name: 'file',
					formData: {
						key: key, // 存到七牛云后的文件名字，访问图片会用到
						token: _this.token // uploadToken，需要动态获取，调用云函数接口获取
					},
					success(res) {
						console.log(res);
						je(res);
					},
					fail() {
						console.log('上传失败了', err);
					}
				});
			});
		},
		mainImg() {
			const _this = this;
			uni.chooseImage({
				count: 1, // 可上传的图片数量，为1表示单张上传
				success: async function (res, row) {
					uni.showLoading({
						title: '上传中，请稍候...'
					});
					let key = '/images/gg/' + Date.parse(new Date()) + '.png';
					let info = await _this.getUploadFile(res.tempFilePaths[0], key);
					let path = JSON.parse(info.data).key;
					_this.form.img = _this.$store.state.imgUrl + path;
					console.log(_this.form.img);
					uni.hideLoading();
				}
			});
		},
		radioGroupChange(e) {},
		radioChange(e) {},
		search() {
			this.loadStatus = 'loadmore';
			this.page_num = 1;
			this.flowList = [];
			this.lower();
		},
		async lower() {
			if (this.loadStatus === 'nomore') {
				return false;
			} else {
				this.loadStatus = 'loading';
			}
			if (this.current === 0) {
				console.log(1);
			}
			let info = await shopgoodslist({
				pageIndex: this.page_num,
				pageSize: 10,
				status: 1,
				title: this.keyword
			});
			info.data.list.forEach((item) => {
				this.flowList.push(item);
			});
			if (info.data.list.length === 10) {
				this.page_num += 1;
				this.loadStatus = 'loadmore';
			} else {
				this.loadStatus = 'nomore';
			}
		}
	}
};
</script>

<style lang="scss">
.advertisement {
	padding-bottom: constant(safe-area-inset-bottom); /*兼容 IOS<11.2*/
	padding-bottom: env(safe-area-inset-bottom); /*兼容 IOS>11.2*/
	.i {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.l {
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			display: flex;
			align-items: flex-end;
			.c {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(255, 0, 0, 1);
				margin-left: 10rpx;
			}
		}
		.l2 {
			font-size: 26rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.r {
			display: flex;
			align-items: center;
			font-size: 30rpx;
			font-weight: 400;
			color: #222;
			.t {
				margin-right: 10rpx;
			}
			input {
				text-align: right;
			}
			.d {
				margin-left: 10rpx;
			}
		}
		.r2 {
			.r2_t {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
			}
			.r2_b {
				width: 146rpx;
				height: 146rpx;
				margin: 10rpx auto;
				img {
					width: 100%;
					height: 100%;
				}
			}
			.r2_box {
				width: 73px;
				height: 73px;
				display: flex;
				align-items: center;
				justify-content: center;
				.r2_box_img {
					width: 25px;
					height: 25px;
				}
			}
			.r2_box2 {
				background: rgba(242, 242, 242, 1);
			}
			.r2_t {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
			}
			.r2_b {
				width: 146rpx;
				height: 146rpx;
				margin: 10rpx auto;
				img {
					width: 100%;
					height: 100%;
				}
			}
		}
	}
	.i2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		.top {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10rpx 0;
			font-size: 30rpx;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
			.l {
				display: flex;
				align-items: center;
			}
			.c {
				font-size: 30rpx;
				font-weight: 400;
				color: rgba(255, 0, 0, 1);
				margin-left: 10rpx;
			}
			.l_r {
				font-size: 26rpx;
				font-weight: 400;
				color: rgba(204, 204, 204, 1);
			}
		}
		.bot {
			margin-top: 10rpx;
			display: flex;
			flex-wrap: wrap;
			img {
				width: 146rpx;
				height: 146rpx;
				margin-right: 20rpx;
				margin-bottom: 20rpx;
			}
		}
		.txtr {
			textarea {
				width: 666rpx;
				height: 230rpx;
				border-radius: 16rpx;
				background: rgba(242, 242, 242, 1);
				padding: 16rpx 32rpx;
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
	.info {
		.t1 {
			padding: 20rpx 30rpx;
			border-top: 1px solid #eee;
			font-size: 15px;
			font-weight: 400;
			color: rgba(51, 51, 51, 1);
		}
		.t2 {
			padding: 0 30rpx;
			font-size: 13px;
			font-weight: 400;
			color: rgba(204, 204, 204, 1);
		}
		.t3 {
			display: flex;
			justify-content: center;
			margin-top: 12px;
			.t3_i {
				width: 137px;
				opacity: 1;
				border-radius: 6px;
				background: rgba(255, 255, 255, 1);
				border: 1px solid rgba(227, 227, 227, 1);
				padding: 7px 11px;
				.t3_i1 {
					font-size: 13px;
					font-weight: 400;
					color: rgba(122, 119, 119, 1);
				}
				.t3_i22 {
					font-size: 25px;
					font-weight: 500;
					color: rgba(51, 51, 51, 1);
					margin-top: 10px;
					display: flex;
					align-items: center;
				}
				.t3_i3 {
					font-size: 13px;
					font-weight: 400;
					color: rgba(122, 119, 119, 1);
					margin-top: 10px;
				}
				.t3_i4 {
					display: flex;
					justify-content: space-between;
					font-size: 14px;
					font-weight: 700;
					color: rgba(246, 83, 50, 1);
					padding-top: 4px;
					margin-top: 4px;
					border-top: 1px solid #eee;
					.L_img {
						width: 20px;
						height: 20px;
					}
				}
			}
			.t3_it {
				border: 1px solid rgba(255, 170, 0, 1);
			}
			.t3_i2 {
				margin-left: 32px;
			}
		}
	}
	.kl {
		padding: 30rpx;
		height: 70vh;
		overflow: scroll;
		box-sizing: border-box;

		.kl_title {
			text-align: center;
			padding: 0 0 30rpx 0;
			font-size: 36rpx;
			font-weight: 400;
		}
		.ck {
			.msg {
				height: 40vh;
				overflow-y: scroll;
				padding: 30rpx;
			}
		}
	}
	.bt {
		width: 604rpx;
		height: 84rpx;
		border-radius: 196rpx;
		border: 2rpx solid rgb(255, 67, 73);
		background: rgb(255, 67, 73);
		display: flex;
		justify-content: center;
		align-items: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		margin: 40rpx auto 0 auto;
	}
	.bt2 {
		padding: 20rpx 30rpx;
		box-sizing: border-box;
		background: #fff;
		position: absolute;
		left: 0;
		right: 0;
		bottom: constant(safe-area-inset-bottom);
		bottom: env(safe-area-inset-bottom);
		.tips {
			font-size: 24rpx;
			font-weight: 400;
			color: rgba(102, 102, 102, 1);
		}
		.b2 {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: 20rpx;
			.l {
				display: flex;
				align-items: center;
				font-size: 28rpx;
				font-weight: 400;
				color: rgba(102, 102, 102, 1);
				.c {
					color: rgba(246, 83, 50, 1);
				}
			}
			.r {
				width: 306rpx;
				height: 88rpx;
				border-radius: 16rpx;
				background: rgba(255, 67, 73, 1);
				font-size: 32rpx;
				font-weight: 400;
				color: rgba(255, 255, 255, 1);
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
}
</style>
